<template>
	<view class="index-container">
		<view class="index-body">
			<view class="index-zddk-box" @click="toUploadPage()">
				<image src="../../static/index-xd2.png"></image>
				<view class="info">
					<view class="top">图像采集</view>
					<!-- <view class="bottom">拍照、录视频</view> -->
				</view>
			</view>
			<view class="index-zsgl-box" @click="toMainPage()">
				<image src="../../static/index-xd.png"></image>
				<view class="info">
					<view class="top">图像采集管理</view>
					<!-- <view class="bottom">巡店详情</view> -->
				</view>
			</view>
			<!-- <view class="index-mdpj-box" @click="toAuthorityPage()">
				<image src="../../static/index-mdpj.png"></image>
				<view class="info">
					<view class="top">权限管理</view>
					<view class="bottom">授权管理</view>
				</view>
			</view> -->
			<!-- <view class="index-btn-box index-xd-box" @click="toUploadPage()">我要巡店</view>
			<view class="index-btn-box index-xd-history-box" @click="toMainPage()">巡店记录</view>
			
			<view class="index-btn-box index-qx-box" @click="toAuthorityPage()">权限管理</view> -->
		</view>
	</view>
</template>
<script>
	import {
		NetWork
	} from '../../common/network.js'

	export default {
		data() {
			return {}
		},
		onShow() {
			this.clearLocalData();
			const pages = getCurrentPages();
			console.log('巡店首页，获取当前页面栈层数：');
			console.log(pages);
		},
		methods: {
			clearLocalData() {
				this.removeStorageStoreItem();
				this.removeStorageMyImageList();
				this.removeStorageMyVideoList();
			},
			removeStorageStoreItem() {
				uni.getStorage({
					key: 'storeItem',
					success: function(res) {
						uni.removeStorage({
							key: 'storeItem',
							success: function(res) {
								console.log('remove storage storeItem sucess.');
								console.log(res);
							}
						});
					},
					fail: function(e) {
						console.log('not found storage storeItem.');
						console.log(e);
					}
				});
			},
			removeStorageMyImageList() {
				uni.getStorage({
					key: 'myImageList',
					success: function(res) {
						uni.removeStorage({
							key: 'myImageList',
							success: function(res) {
								console.log('remove storage myImageList sucess.');
								console.log(res);
							}
						});
					},
					fail: function(e) {
						console.log('not found storage myImageList.');
						console.log(e);
					}
				});
			},
			removeStorageMyVideoList() {
				uni.getStorage({
					key: 'myVideoList',
					success: function(res) {
						uni.removeStorage({
							key: 'myVideoList',
							success: function(res) {
								console.log('remove storage myVideoList sucess.');
								console.log(res);
							}
						});
					},
					fail: function(e) {
						console.log('not found storage myVideoList.');
						console.log(e);
					}
				});
			},
			toUploadPage() {
				NetWork(() => {
					uni.navigateTo({
						url: '../upload/index'
					});
				}, () => {
					console.error('network error');
				})
			},
			toMainPage() {
				NetWork(() => {
					uni.navigateTo({
						url: '../main/index'
					});
				}, () => {
					console.error('network error');
				})
			},
			toAuthorityPage() {
				NetWork(() => {
					uni.navigateTo({
						url: '../authority/authority'
					});
				}, () => {
					console.error('network error');
				})
			}
		}
	}
</script>
<style>
	page,
	.index-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background: #F3F5F7;
	}

	.index-container {
		background: url(../../static/index-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 529rpx;
		background-position: left top;
	}

	.index-body {
		width: 100%;
		padding-top: 433rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	.index-btn-box {
		width: 330rpx;
		height: 162rpx;
		text-align: center;
		line-height: 162rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
		border-radius: 16rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.index-xd-box {
		width: 690rpx;
		height: 162rpx;
		line-height: 162rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
		border-radius: 16rpx;
		display: flex;
		margin: 433rpx 30rpx 30rpx 30rpx;
	}

	.index-cbk-box,
	.index-zddk-box,
	.index-zsgl-box,
	.index-mdpj-box {
		width: 330rpx;
		height: 162rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
		border-radius: 16rpx;
		display: flex;
	}
	.index-zddk-box{
		margin-left: 20rpx;
	}
	.index-zsgl-box{
		width: 360rpx;
		margin-left: 20rpx;
	}

	.index-cbk-box,
	.index-mdpj-box {
		margin-top: 30rpx;
	}

	.index-xd-box image {
		width: 104rpx;
		height: 104rpx;
		margin: 31rpx 17rpx 27rpx 17rpx;
	}

	.index-cbk-box image {
		width: 108rpx;
		height: 108rpx;
		margin: 29rpx 11rpx 25rpx 17rpx;
	}

	.index-zsgl-box image {
		width: 108rpx;
		height: 108rpx;
		margin: 29rpx 11rpx 25rpx 17rpx;
	}

	.index-zddk-box image {
		width: 108rpx;
		height: 108rpx;
		margin: 29rpx 11rpx 25rpx 21rpx;
	}

	.index-mdpj-box image {
		width: 108rpx;
		height: 108rpx;
		margin: 29rpx 11rpx 25rpx 21rpx;
	}

	.index-xd-box .info,
	.index-cbk-box .info,
	.index-zsgl-box .info,
	.index-zddk-box .info,
	.index-mdpj-box .info {
		flex: 1;
		height: 162rpx;
	}

	.index-xd-box .info .top,
	.index-cbk-box .info .top,
	.index-zsgl-box .info .top,
	.index-zddk-box .info .top,
	.index-mdpj-box .info .top {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 56rpx;
	}

	.index-xd-box .info .bottom,
	.index-cbk-box .info .bottom,
	.index-zsgl-box .info .bottom,
	.index-zddk-box .info .bottom,
	.index-mdpj-box .info .bottom {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		letter-spacing: 1rpx;
		margin-top: 7rpx;
	}
</style>
